<div class="report" ngClass.xs="double-height xs">
  <div class="card-container">
    <mat-card class="card" [class.loading]="!isReady">
      @if (isReady) {
        <mat-toolbar-row class="mat-card-toolbar toolbar">
          <mat-card-title class="title">
            <h3 class="mat-card-title-text">{{ reportTitle | translate }}</h3>
          </mat-card-title>
          <!-- Controls/Tools -->
          <div class="line-chart-tools-wrapper">
            @if (localControls() && !report().errorConf) {
              <div class="line-chart-tools">
                <div class="steps-group" aria-label="Steps">
                  <button
                    mat-button
                    [disabled]="stepBackDisabled"
                    [matTooltip]="'Step Back' | translate"
                    [matTooltipShowDelay]="1000"
                    [ixTest]="['steps', 'back']"
                    (click)="stepBack()"
                  >
                    <ix-icon name="mdi-rewind"></ix-icon>
                  </button>
                  <button
                    mat-button
                    [disabled]="stepForwardDisabled"
                    [matTooltip]="'Step Forward' | translate"
                    [matTooltipShowDelay]="1000"
                    [ixTest]="['steps', 'forward']"
                    (click)="stepForward()"
                  >
                    <ix-icon name="mdi-fast-forward"></ix-icon>
                  </button>
                </div>

                <div class="zoom-group" aria-label="Zoom Level">
                  <button
                    mat-button
                    [disabled]="zoomLevelIndex === zoomLevelMin"
                    [matTooltip]="'Zoom Out' | translate"
                    [ixTest]="['zoom', 'out']"
                    (click)="timeZoomOut()"
                    ><ix-icon name="mdi-magnify-minus"></ix-icon>
                  </button>

                  <button
                    mat-button
                    [disabled]="zoomLevelIndex === zoomLevelMax && stepForwardDisabled && !customZoom"
                    [matTooltip]="'Reset Zoom' | translate"
                    [ixTest]="['zoom', 'reset']"
                    (click)="timeZoomReset()"
                  >
                    {{ currentZoomLevel | mapValue: zoomLevelLabels | translate }}
                  </button>

                  <button
                    mat-button
                    [disabled]="zoomLevelIndex === zoomLevelMax"
                    [matTooltip]="'Zoom In' | translate"
                    [ixTest]="['zoom', 'in']"
                    (click)="timeZoomIn()"
                    >
                      <ix-icon name="mdi-magnify-plus"></ix-icon>
                  </button>
                  </div>
                </div>
              }
            </div>
          </mat-toolbar-row>
        }

      @if (isReady && !report().errorConf) {
        <mat-card-content class="card-content">
          <div class="chart-wrapper-outer">
            <div class="chart-wrapper">
              <ix-linechart
                [chartId]="chartId"
                [chartColors]="chartColors"
                [data]="data"
                [stacked]="isStacked"
                [timezone]="timezone"
                [report]="report()"
                [labelY]="report().vertical_label || ''"
                (zoomChange)="onZoomChange($event)"
              ></ix-linechart>
            </div>

            <div class="legend-wrapper timestamps">
              @if (currentStartDate) {
                <h4 class="legend-timestamp">
                  <strong>{{ 'Start' | translate }}:</strong>
                  <span class="date">
                    <ix-date [date]="currentStartDate"></ix-date>
                  </span>
                </h4>
              }
              @if (currentEndDate) {
                <h4 class="legend-timestamp">
                  <strong>{{ 'End' | translate }}:</strong>
                  <span class="date">
                    <ix-date [date]="currentEndDate"></ix-date>
                  </span>
                </h4>
              }
            </div>
          </div>

          <section #legendElement class="legend">
            @if (report() && data?.legend) {
              <div class="legend-timestamp">
                @if (data && legendData.xHTML && shouldShowLegendValue) {
                  <h4>
                    <strong>{{ 'Time' | translate }}:</strong>
                    @if (legendData.xHTML) {
                      <span class="date">
                        <ix-date [date]="getDateFromString(legendData.xHTML)"></ix-date>
                      </span>
                    }
                  </h4>
                }
              </div>
            }

            @if (report() && data?.legend) {
              <div class="legend-group-wrapper">
                <table class="legend-table" [ixTest]="['reports-table', report().title]">
                  <!-- Table Header-->
                  <tr class="legend-group header" ixTest="table-header">
                    <th class="legend-label">
                      <strong>{{ 'Key' | translate }}</strong>
                    </th>
                    @if (data?.aggregations) {
                      @for (item of data?.aggregations | keyvalue; track item) {
                        <th class="legend-label">
                          <strong>{{ item.key | translate }}</strong>
                        </th>
                      }
                    }
                  </tr>
                  <!-- Table Rows -->
                  @for (legendItem of data.legend; track legendItem; let i = $index) {
                    <tr class="legend-group" [ixTest]="legendItem">
                      <td class="legend-label">
                        <!--Legend Label-->
                        @if (chartColors && legendItem) {
                          <div
                            class="swatch"
                            [style.background-color]="chartColors[i]"
                          ></div>
                        }
                        <span class="legend-item">
                          <strong>{{ legendItem | translate }}</strong>
                        </span>
                        @if (legendData.series?.[i]?.yHTML && shouldShowLegendValue) {
                          <span class="date">:
                            {{ legendData.series[i].yHTML | translate }}
                          </span>
                        }
                      </td>
                      <!-- Aggregations -->
                      @if (data?.aggregations) {
                        @for (item of data.aggregations | keyvalue; track item) {
                          <td class="report-analytics">
                            <span>{{ item.value[i] ? item.value[i] : 'null' }}</span>
                          </td>
                        }
                      }
                    </tr>
                  }
                </table>
              </div>
            }
            @if (legendData.stackedTotalHTML && shouldShowTotal && shouldShowLegendValue) {
              <h4 class="total-line">
                <strong>{{ 'Total' | translate }}:</strong>
                <span>{{ legendData.stackedTotalHTML | translate }}</span>
              </h4>
            }
          </section>
        </mat-card-content>
      }

      @if (isReady && report()?.errorConf) {
        <mat-card-content>
          <ix-empty [conf]="report().errorConf"></ix-empty>
        </mat-card-content>
      }
    </mat-card>
  </div>
</div>
